<template>
  <div id="app">
    <div id="loginbg" class="loginbg">
      <div class="content clearfix">
        <div class="loginText">摄影小程序后台管理</div>
        <div class="login clearfix">
          <div class="login_top">
            <span class="account active">账号密码登录</span>
          </div>
          <div class="login_box">
            <div>
              <div class="inputWrap">
                <label class="inputLabel">
                  <i class="el-icon-user"></i>
                </label>
                <input
                  type="text"
                  class="el-input input_display"
                  placeholder="请输入手机号/邮箱"
                />
              </div>
              <div class="inputWrap mt20px">
                <label class="inputLabel">
                  <i class="el-icon-lock"></i>
                </label>
                <input
                  type="password"
                  class="el-input input_display"
                  placeholder="请输入密码"
                />
              </div>
            </div>

            <button class="loginBtn">登录</button>
            <div class="login_text">
              <a href="#/signUp">
                <span class="login_text_regs">立即注册</span>
              </a>
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#loginbg {
  width: 100%;
  height: 100%;
  background-image: url(./img/web.db426e9.jpg);
  background-size: cover;
  background-position: 50%;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}
.content {
  position: absolute;
  width: 60%;
  padding: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.clearfix {
  zoom: 1;
}
.loginText {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  transform: translateY(-80px);
}
.login {
  flex: 4;
  border: 2px solid #019efd;
  background-color: #163a9e;
  padding: 0 30px 30px;
  box-shadow: 0 5px 2px #145fc5;
}
.login_top {
  width: 100%;
  line-height: 60px;
  margin-bottom: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.login_top .active {
  width: 108px;
  transition-duration: 0.5s;
  border-bottom: 2px solid #0468c4;
}
.login_top span {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.inputWrap {
  color: #fff;
  position: relative;
}
.inputWrap .inputLabel {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  line-height: 30px;
  z-index: 100;
}
.el-icon-user:before {
  content: "\E6E3";
}
.el-icon-lock:before {
  content: "\E6E5";
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}
.loginBtn {
  width: 100%;
  height: 40px;
  outline: none;
  background-color: #008bff;
  margin-top: 80px;
  border: transparent;
  cursor: pointer;
  color: #fff;
}
.login_text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 10px;
}
.login_text span {
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.right {
  flex: 7;
  position: relative;
  background: url(./img/webrght.e901746.jpg);
  background-size: cover;
  box-shadow: 0 0 5px 2px #145fc5;
  margin-left: 5px;
}
</style>
